import React from 'react';
import { useState, useEffect, useMemo } from 'react';

import axios from 'axios';
const Father1 = () => {
    // 搜索的关键字
    const [keywords, setKeywordsFn] = useState('');
    // 学校数据列表数据
    const [schoollist, setSchoolListFn] = useState([])

    // 定义一个count
    const [count, setCount] = useState(0);
    useEffect(() => {
        //console.log('useEffect');
        axios.get('https://api.i-lynn.cn/college').then(res => {
            setSchoolListFn(res.data.data.list1)
        })
    }, [])

    // useMemo 语法:
    // const 值 = useMemo(()=>{return 值},[变量1,变量2,...])
    // 注意: 参数1函数返回的值就是变量const的值
    // 执行时间: 初始化执行一次,当参数2 中的数组 变量1或变量2 等等修改的时候, 会执行参数1这个回调函数
    // 作用: useMemo 相当于vue中的计算属性,当数组中依赖的数据发生变化, 计算属性重新执行(参数1函数),
    // 如果没有发生变化, 就使用上一次的计算属性的值, 也就是使用缓存

    // const count1 = useMemo(() => {
    //     console.log('执行');
    //     return 100
    // }, [])


    // const filterSchoolList = schoollist.filter(item => {
    //     return item.school_name.includes(keywords)
    // })
    //console.log('filterSchoolList', filterSchoolList);
    const filterSchoolList = useMemo(() => {
        console.log('usememo');
        return schoollist.filter(item => {
            return item.school_name.includes(keywords)
        })
    }, [keywords, schoollist])
    return (
        <div>
            {/* 使用count 变量 */}
            <p onClick={() => {
                setCount(count + 1)
            }}>count:{count}</p>
            {/* 输入框部分 */}
            <p>
                <input placeholder='请输入关键字' value={keywords} onChange={(e) => {
                    setKeywordsFn(e.target.value)
                }} />
            </p>

            {/* 列表展示部分 */}
            <ul>
                {
                    filterSchoolList.map(item => <li key={item.id}>{item.school_name}</li>)
                }
            </ul>
        </div>
    );
}

export default Father1;
